<!--
 * @Description: 查看
 * @Author: Huang Junjie
 * @Date: 2021-04-13 17:05:40
 * @LastEditTime: 2024-01-12 11:37:03
 * @LastEditors: zhangweili zhang_weili@uxsino.com
-->
<template>
  <div>
    <base-dialog
      width="980px"
      class="dialog_box"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      :show-fullscreen-icon="false"
      :show-default-footer="false"
      @open="beforeOpenDialog">
      <div class="tab-type-box">
        <el-radio-group v-model="tabType" style="margin-bottom: 10px;" @change="changeTabType">
          <el-radio-button :label="1">缺陷信息</el-radio-button>
          <el-radio-button :label="2">整改明细</el-radio-button>
          <el-radio-button :label="3">延期明细</el-radio-button>
          <el-radio-button :label="4">审核明细</el-radio-button>
        </el-radio-group>
      </div>
      <div class="data-form-box">
        <el-scrollbar ref="scrollbarData" class="data-form-scrollbar">
          <!-- 缺陷信息 -->
          <template v-if="tabType === 1">
            <table id="look-data">
              <tbody v-for="(item, key) in data" :key="key">
                <tr v-if="item.type ==='text'">
                  <td>{{ item.column1 }}</td>
                  <td v-if="item.column2">{{ item.column2 }}</td>
                  <td v-else>无</td>
                  <td>{{ item.column3 }}</td>
                  <td v-if="item.column4">{{ item.column4 }}</td>
                  <td v-else>无</td>
                  <td>{{ item.column5 }}</td>
                  <td v-if="item.column6">{{ item.column6 }}</td>
                  <td v-else-if="item.column6 === null">无</td>
                  <td v-else />
                </tr>
                <tr v-if="item.type ==='textarea'">
                  <td>{{ item.column1 }}</td>
                  <td v-if="item.column2" colspan="6">{{ item.column2 }}</td>
                  <td v-else colspan="6">无</td>
                </tr>
                <tr v-if="item.type ==='file'">
                  <td>{{ item.column1 }}</td>
                  <td colspan="6" class="file-box">
                    <UploadFile
                      v-if="dialog.visible && item.column2 && item.column2.length"
                      ref="upload"
                      :model="fileModalPillarImages" />
                    <span v-else>无</span>
                  </td>
                </tr>
                <tr v-if="item.type ==='file1'">
                  <td>{{ item.column1 }}</td>
                  <td colspan="6" class="file-box">
                    <UploadFile
                      v-if="dialog.visible && item.column2 && item.column2.length"
                      ref="upload"
                      :model="fileModalDefectImages" />
                    <span v-else>无</span>
                  </td>
                </tr>
                <tr v-if="item.type ==='file2'">
                  <td>{{ item.column1 }}</td>
                  <td colspan="6" class="file-box">
                    <UploadFile
                      v-if="dialog.visible && item.column2 && item.column2.length"
                      ref="upload"
                      :model="fileModalRectifImagess" />
                    <span v-else>无</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </template>
          <!-- 缺陷信息 -->

          <!-- 整改明细 -->
          <template v-if="tabType === 2">
            <table v-if="defectRectifList.length" id="look-data">
              <tbody>
                <tr v-for="(item, index) in defectRectifList" :key="'defect_1_' + index">
                  <td>整改工区</td>
                  <td>{{ item.handleWorkareaName }}</td>
                  <td>整改人</td>
                  <td>{{ item.solvePersonal }}</td>
                  <td>整改日期</td>
                  <td>{{ item.solveDatetime }}</td>
                  <td>确认人</td>
                  <td>{{ item.confirmPersonal }}</td>
                </tr>
                <tr v-for="(item, index) in defectRectifList" :key="'defect_2_' + index">
                  <td>第{{ index + 1 }}次整改措施</td>
                  <td colspan="8">{{ item.solveMethod }}</td>
                </tr>
                <tr v-for="(item, index) in defectRectifList" :key="'defect_3_' + index">
                  <td>第{{ index + 1 }}次整改照片</td>
                  <td colspan="8" class="file-box">
                    <UploadFile
                      v-if="dialog.visible && tabType === 2"
                      ref="upload"
                      :model="item.fileModalRectifPhotos" />
                    <span v-else>无</span>
                  </td>
                </tr>
              </tbody>
            </table>
            <div v-else class="null">暂无数据</div>
          </template>
          <!-- 整改明细 -->

          <!-- 延期明细 -->
          <template v-if="tabType === 3">
            <table v-if="defectDefferred.length" id="look-data">
              <tbody>
                <tr v-for="(item, index) in defectDefferred" :key="'defect_4_' + index">
                  <td>延期申请部门</td>
                  <td>{{ item.applyWorkarea }}</td>
                  <td>延期期限</td>
                  <td>{{ item.deferredTime }}</td>
                  <td>申请日期</td>
                  <td>{{ item.createDatetime }}</td>
                  <td>审核部门</td>
                  <td>{{ item.reviewerDeptName }}</td>
                  <td>是否通过</td>
                  <td>{{ item.statusText }}</td>
                </tr>
                <tr v-for="(item, index) in defectDefferred" :key="'defect_5_' + index">
                  <td>第{{ index + 1 }}次申请延期原因及过渡安全措施</td>
                  <td colspan="10">{{ item.mero }}</td>
                </tr>
              </tbody>
            </table>
            <div v-else class="null">暂无数据</div>
          </template>
          <!-- 延期明细 -->

          <!-- 审核明细 -->
          <template v-if="tabType === 4">
            <table v-if="auditDetails.length" id="look-data">
              <tbody v-for="(item, index) in auditDetails" :key="'defect_6_' + index">
                <tr>
                  <td>审核类型</td>
                  <td>{{ item.itemTitle }}</td>
                  <td>审核部门</td>
                  <td>{{ item.handleDeptName }}</td>
                  <td>审核日期</td>
                  <td>{{ item.handleTime }}</td>
                  <td>审核状态</td>
                  <td>{{ item.skipFlagText }}</td>
                </tr>
                <tr>
                  <td>审核意见</td>
                  <td colspan="7">{{ item.itemContent }}</td>
                </tr>
              </tbody>
            </table>
            <div v-else class="null">暂无数据</div>
          </template>
          <!-- 审核明细 -->
        </el-scrollbar>
      </div>
    </base-dialog>
  </div>
</template>

<script>
import {
  getInfoById as getInfoByIdDevice,
  getDefectRectifList,
  getDefectDefferred,
  getAuditDetailsDevice
} from '@/api/jcwwtk/information'
import UploadFile from '@/views/cms/jcwsc/components/UploadFile'
import { getDatatime } from '@/utils'

export default {
  components: {
    UploadFile
  },
  props: {
    dialog: {
      type: Object,
      default() {
        return {}
      }
    },
    defectType: { // 类型
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      // tab类型,1:缺陷信息,2:整改明细,3:延期明细,4:审核明细
      tabType: 1,

      // 查看页面数据
      data: [],

      // 杆号-附件配置
      fileModalPillarImages: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: true,
        uploadType: 'file'
      },

      // 缺陷-附件配置
      fileModalDefectImages: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: true,
        uploadType: 'file'
      },

      // 整改-附件配置
      fileModalRectifImagess: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: true,
        uploadType: 'file'
      },

      detailsData: {}, // 详情接口返回数据
      defectRectifList: [], // 缺陷整改信息历史
      defectDefferred: [], // 缺陷的所有延期信息
      auditDetails: [] // 获取接触网的审核明细查看
    }
  },
  watch: {
    'dialog.visible'() {
      if (this.dialog.visible) {
        this.data = []
        this.tabType = 1
        this.getInfoById(this.dialog.form.id) // 根据id查询信息
      } else {
        this.defectRectifList = [] // 缺陷整改信息历史
        this.defectDefferred = [] // 缺陷的所有延期信息
        this.auditDetails = [] // 获取接触网的审核明细查看
      }
    }
  },
  methods: {
    // 切换tabs
    changeTabType(tabType) {
      if (tabType === 2 && this.defectRectifList && this.defectRectifList.length === 0) {
        this.getDefectRectifList() // 查看当前缺陷整改信息历史
      } else if (tabType === 3 && this.defectDefferred && this.defectDefferred.length === 0) {
        this.getDefectDefferred() // 获取缺陷的所有延期信息
      } else if (tabType === 4 && this.auditDetails && this.auditDetails.length === 0) {
        this.getAuditDetails() // 获取接触网的审核明细查看
      }
    },

    // 根据id查询信息
    getInfoById(id) {
      // 根据id查询信息
      getInfoByIdDevice({
        unitCodeParams: this.dialog.form.unitCodeParams,
        id: id
      }).then(response => {
        this.detailsData = response.data
        response = response.data

        // 组装附件（用于回显）
        var fileArr = []
        // if (response.pillarImagesList && response.pillarImagesList.length) {
        //   response.pillarImagesList.forEach(item => {
        //     fileArr.push(item.filePath)
        //   })
        //   this.showFile(fileArr, 1, 0, 0, true, response.pillarImagesList) // 杆号照片显示附件
        // }
        fileArr = []
        if (this.defectType === '1') {
          if (response.defectImagesList && response.defectImagesList.length) {
            response.defectImagesList.forEach(item => {
              fileArr.push(item.filePath)
            })
            this.showFile1(fileArr, 1, 0, 0, true, response.defectImagesList) // 缺陷照片显示附件
          }
        }
        fileArr = []
        if (response.rectifImagesList && response.rectifImagesList.length) {
          response.rectifImagesList.forEach(item => {
            fileArr.push(item.filePath)
          })
          this.showFile2(fileArr, 1, 0, 0, true, response.rectifImagesList) // 整改照片显示附件
        }

        this.data = [
          {
            column1: '线路',
            column2: response.lineName,
            column3: '区间站场',
            column4: response.lineSiteName,
            column5: '行别',
            column6: response.directionName,
            type: 'text'
          },
          {
            column1: '股道',
            column2: response.trackName,
            column3: '隧道',
            column4: response.tunnelName,
            column5: '支柱号',
            column6: response.pillarNum,
            type: 'text'
          },
          {
            column1: '缺陷类别',
            column2: response.categoryName,
            column3: '缺陷来源',
            column4: response.originName,
            column5: '缺陷等级',
            column6: response.levelName,
            type: 'text'
          },
          {
            column1: '缺陷等级',
            column2: response.levelName,
            column3: '发现日期',
            column4: response.findDate,
            column5: '发现人',
            column6: response.findBy,
            type: 'text'
          },
          {
            column1: '整改期限',
            column2: response.solveDate,
            column3: '责任工区',
            column4: response.solveWorkareaName,
            column5: '缺陷状态',
            column6: response.status,
            type: 'text'
          },
          {
            column1: '累计延期',
            column2: response.deferredTime,
            column3: '延期状态',
            column4: '延期' + (response.deferredCount || 0) + '次',
            column5: '',
            column6: '',
            type: response.deferredStatus === 2 ? 'text' : null
          },
          {
            column1: '最终整改日期',
            column2: response.solveDatetime,
            column3: '最终整改人',
            column4: response.solvePersonal,
            column5: '最终整改确认人',
            column6: response.confirmPersonal,
            type: response.status === 'YES' ? 'text' : null
          },
          {
            column1: '问题描述',
            column2: response.defectDescription,
            type: 'textarea'
          },
          {
            column1: '整改建议',
            column2: response.handleDescription,
            type: 'textarea'
          },
          {
            column1: '最终整改措施',
            column2: response.solveMethod,
            type: response.status === 'YES' ? 'textarea' : null
          },
          // {
          //   column1: '杆号照片',
          //   column2: response.pillarImagesList,
          //   type: 'file'
          // },
          {
            column1: '缺陷照片',
            column2: response.defectImagesList,
            type: 'file1'
          },
          {
            column1: '最终整改照片',
            column2: response.rectifImagesList,
            type: response.status === 'YES' ? 'file2' : null
          }
        ]

        // 控制滚动到最新消息
        var div = this.$refs['scrollbarData'].$refs['wrap']
        this.$nextTick(() => {
          div.scrollTop = 0
        })
      })
    },

    // 杆号照片-显示附件
    showFile(pathList, type, key, index, isDetail, fileList) {
      this.fileModalPillarImages = {
        title: '',
        visible: true,
        pathList: pathList,
        fileList: fileList,
        type,
        bizType: '1',
        key,
        index,
        isDetail: isDetail,
        uploadType: 'file'
      }
    },

    // 缺陷照片-显示附件
    showFile1(pathList, type, key, index, isDetail, fileList) {
      this.fileModalDefectImages = {
        title: '',
        visible: true,
        pathList: pathList,
        fileList: fileList,
        type,
        bizType: '1',
        key,
        index,
        isDetail: isDetail,
        uploadType: 'file'
      }
    },

    // 整改照片-显示附件
    showFile2(pathList, type, key, index, isDetail, fileList) {
      this.fileModalRectifImagess = {
        title: '',
        visible: true,
        pathList: pathList,
        fileList: fileList,
        type,
        bizType: '1',
        key,
        index,
        isDetail: isDetail,
        uploadType: 'file'
      }
    },

    // 打开弹框前执行
    beforeOpenDialog() {}
  }
}
</script>

<style lang="scss" scoped>
  #look-data {
    border-collapse: collapse;
    width: 100%;
  }
  #look-data td, #look-data th {
    border: 1px solid #DFE6EC;
    font-size: 16px;
    line-height: 1.5;
    padding: 8px 0;
  }
  #look-data tr td:nth-child(odd){
    width: 10%;
    max-width: 20px;
    padding-left: 0px;
    padding-right: 10px;
    text-align: right;
    background: #E9F2FC;
  }
  #look-data tr td:nth-child(even){
    max-width: 20px;
    padding-left: 10px;
    padding-right: 10px;
    word-wrap: break-word;
    overflow: hidden;
  }
  .dialog_box #look-data tr td.file-box {
    width: 100%;
    text-align: left;
    background: #ffffff;
  }
  #look-data .file-content {
    min-height: 187px;
  }
  ::v-deep .el-dialog {
    .el-dialog__body {
      min-height: calc(80vh - 100px) !important;
      .null {
        text-align: center;
        padding-top: 250px;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .data-form-box {
    height: 588px;
    .data-form-scrollbar {
      height: 100%;
      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
  }
  .is-fullscreen {
    .data-form-box {
      height: 762px;
    }
  }
</style>
